<template>
  <div class="wrap repair">
    <div class="tab">
      <van-tabs v-model="active">
        <van-tab title="我的报修单"></van-tab>
        <van-tab title="我要报修"></van-tab>
      </van-tabs>
    </div>
    <!-- 我的报修单 -->
    <div class="repair_list" v-if="active == 0">
      <div class="repair_sum">
        <h3>水电报修</h3>
        <p>报修日期：2021年10月22日</p>
        <p>报修编号：123456</p>
        <p>处理日期：2021年10月23日</p>
      </div>
    </div>
    <!-- 我要报修 -->
    <div class="my_repair" v-else-if="active == 1">
      <van-cell-group>
        <van-field
          v-model="value"
          label="当前房屋"
          placeholder="请输入楼层门牌号等信息"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="personValue"
          label="报修人"
          placeholder="请输入报修人姓名"
        />
      </van-cell-group>
      <van-field
        v-model="fieldValue"
        is-link
        readonly
        label="报修类型"
        placeholder="请选择报修类型"
        @click="show = true"
      />
      <van-popup v-model="show" round position="bottom">
        <van-cascader
          v-model="cascaderValue"
          title="请选择报修类型"
          :options="options"
          @close="show = false"
          @finish="onFinish"
        />
      </van-popup>
      <van-field
        v-model="message"
        rows="2"
        autosize
        label="报修内容"
        type="textarea"
        maxlength="150"
        placeholder="请输报修内容...（限150字）"
        show-word-limit
      />
      <!-- <div class="init_img">
        <p>请上传图片</p>
        <van-uploader v-model="fileList" multiple :max-count="5" />
      </div> -->
      <!-- <van-field
        v-model="dataValue"
        is-link
        readonly
        label="预约时间"
        placeholder="请选择时间"
        @click="shows = true"
      /> -->
      <!-- <van-popup v-model="shows" round position="bottom">
        <van-cascader
          v-model="timeValue"
          title="请选择时间"
          :options="options2"
          @close="shows = false"
          @finish="onSubmit"
        />
      </van-popup> -->
      <van-button type="danger" block round @click="toSend"
        >立即发送</van-button
      >
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { addRepair } from "../api/api";
export default {
  // 定义属性
  name: "Repair",
  data() {
    return {
      repairList: "",
      active: 0,
      value: "",
      personValue: "",
      show: false,
      fieldValue: "",
      cascaderValue: "",
      options: [
        {
          text: "水电煤气",
          value: "001",
        },
        {
          text: "家电家具",
          value: "002",
        },
        {
          text: "门禁",
          value: "003",
        },
        {
          text: "公共设施",
          value: "004",
        },
        {
          text: "物业设备",
          value: "005",
        },
        {
          text: "其他报修",
          value: "006",
        },
      ],
      message: "",
      // shows: false,
      // dataValue: "",
      // timeValue: "",
      // 选项列表，children 代表子选项，支持多级嵌套
      // options2: [
      //   {
      //     text: "周一",
      //     value: "01",
      //     children: [
      //       { text: "8:00", value: "8" },
      //       { text: "9:00", value: "9" },
      //       { text: "10:00", value: "10" },
      //       { text: "11:00", value: "11" },
      //       { text: "12:00", value: "12" },
      //       { text: "13:00", value: "13" },
      //       { text: "14:00", value: "14" },
      //       { text: "15:00", value: "15" },
      //       { text: "16:00", value: "16" },
      //       { text: "17:00", value: "17" },
      //     ],
      //   }
      // ],
      // fileList: [],
    };
  },
  methods: {
    toSend() {
      addRepair({
        repair_name: this.personValue,
        repair_house: this.value,
        repair_sort: this.fieldValue,
        repair_det: this.message,
        repair_status: "2",
      }).then((res) => {
        // console.log(res.data);
        if (res.code == 200 && this.personValue != ''&& this.value != '' && this.fieldValue != '' && this.message != '') {
          Toast.success("发送成功");
        } else {
          Toast.fail("请输入完整信息");
        }
      });
    },
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join("/");
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      this.userImg = file.content;
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang='scss' scoped>
.repair {
  .repair_list {
    .custom-image .van-empty__image {
      width: 90px;
      height: 90px;
    }
    .repair_sum {
      margin: 5px 10px;
      padding: 10px 16px;
      border-radius: 6px;
      box-shadow: 0px 0px 30px #eaeaea;
      h3 {
        font-size: 16px;
        color: #000;
        margin-bottom: 6px;
      }
      p {
        font-size: 14px;
        color: #646566;
        margin: 4px 0;
      }
    }
  }
  .my_repair {
    .init_img {
      padding: 0 16px;
      p {
        font-size: 14px;
        color: #646566;
        margin-bottom: 6px;
      }
    }
    ::v-deep .van-button {
      width: 340px;
      margin: 30px auto;
      background-color: rgb(250, 75, 54);
      border-radius: 6px;
    }
  }
}
</style>